<template>
  <div class="order-manage">
    <div class="page-header">
      <h2 class="page-title">订单管理</h2>
      <div class="filter-bar">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索订单号/用户名"
            style="width: 300px"
            clearable
        >
          <template #append>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
        <el-select
            v-model="orderStatus"
            placeholder="订单状态"
            style="width: 180px; margin-left: 15px"
            clearable
        >
          <el-option label="全部订单" value=""></el-option>
          <el-option label="待支付" value="pending"></el-option>
          <el-option label="已支付" value="paid"></el-option>
          <el-option label="已发货" value="shipped"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已取消" value="cancelled"></el-option>
        </el-select>
      </div>
    </div>

    <el-card class="order-table-card">
      <el-table
          :data="filteredOrders"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" width="120">
          <template #default="scope">¥{{ scope.row.totalAmount.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="status" label="订单状态" width="120">
          <template #default="scope">
            <el-tag
                :type="statusTypeMap[scope.row.status].type"
                :color="statusTypeMap[scope.row.status].color"
            >
              {{ statusTypeMap[scope.row.status].label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
                size="small"
                type="text"
                @click="handleViewDetail(scope.row)"
            >
              查看详情
            </el-button>
            <el-button
                size="small"
                type="text"
                :disabled="!['pending', 'paid'].includes(scope.row.status)"
                @click="handleShip(scope.row)"
            >
              发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination" style="margin-top: 15px; text-align: right;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredOrders.length"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    // 订单状态映射（状态值→显示文本+样式）
    const statusTypeMap = {
      pending: { label: '待支付', type: 'warning', color: '' },
      paid: { label: '已支付', type: 'info', color: '' },
      shipped: { label: '已发货', type: 'primary', color: '' },
      completed: { label: '已完成', type: 'success', color: '' },
      cancelled: { label: '已取消', type: 'danger', color: '' }
    };

    // 模拟订单数据
    const orderList = ref([
      {
        orderNo: 'ORD20230601001',
        username: '张三',
        totalAmount: 299.99,
        createTime: '2023-06-01 09:23:45',
        status: 'completed'
      },
      {
        orderNo: 'ORD20230602002',
        username: '李四',
        totalAmount: 159.00,
        createTime: '2023-06-02 14:12:33',
        status: 'shipped'
      },
      {
        orderNo: 'ORD20230603003',
        username: '王五',
        totalAmount: 499.50,
        createTime: '2023-06-03 16:45:12',
        status: 'paid'
      },
      {
        orderNo: 'ORD20230604004',
        username: '赵六',
        totalAmount: 89.90,
        createTime: '2023-06-04 10:05:56',
        status: 'pending'
      },
      {
        orderNo: 'ORD20230605005',
        username: '孙七',
        totalAmount: 359.00,
        createTime: '2023-06-05 11:30:22',
        status: 'cancelled'
      }
    ]);

    // 筛选条件
    const searchKeyword = ref('');
    const orderStatus = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);

    // 筛选后的订单列表
    const filteredOrders = computed(() => {
      return orderList.value.filter(order => {
        // 搜索关键词筛选（订单号或用户名）
        const matchKeyword = searchKeyword.value
            ? order.orderNo.includes(searchKeyword.value) || order.username.includes(searchKeyword.value)
            : true;
        // 订单状态筛选
        const matchStatus = orderStatus.value ? order.status === orderStatus.value : true;
        return matchKeyword && matchStatus;
      });
    });

    // 表格行样式（已取消订单灰色显示）
    const tableRowClassName = ({ row }) => {
      return row.status === 'cancelled' ? 'row-cancelled' : '';
    };

    // 搜索事件
    const handleSearch = () => {
      currentPage.value = 1; // 重置页码
    };

    // 分页事件
    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1;
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    // 查看详情
    const handleViewDetail = (row) => {
      ElMessage.info(`查看订单 ${row.orderNo} 的详情`);
      // 实际项目中可打开详情弹窗或跳转详情页
    };

    // 发货操作
    const handleShip = (row) => {
      row.status = 'shipped';
      ElMessage.success(`订单 ${row.orderNo} 已发货`);
    };

    return {
      statusTypeMap,
      orderList,
      searchKeyword,
      orderStatus,
      currentPage,
      pageSize,
      filteredOrders,
      tableRowClassName,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleViewDetail,
      handleShip
    };
  }
};
</script>

<style scoped>
.order-manage { height: 100%; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.filter-bar {
  display: flex;
  align-items: center;
}

.order-table-card {
  overflow: hidden;
}

/* 已取消订单样式 */
::v-deep .row-cancelled {
  color: #999;
  background-color: #f5f5f5 !important;
}
</style>